<template>
  <view class="wrap">
    <top-tab tabTitle="视频" @backClick="backClick" backColor="#5B2177"/>
		<!-- 顶部选项卡 -->
		<view class="tabs-box">
			<ms-tabs :list="list" v-model="active" itemColor='#A912E7' lineColor='#A912E7' @input="tabInput"/>
		</view>
		<scroll-view scroll-y="true" refresher-enabled="true" class="sv" :refresher-triggered="triggered" :refresher-threshold="100"
			@refresherrefresh="onRefresh" @refresherabort="onAbort" @scrolltolower="scrollBottom" :style="{height:navHeight+'px'}">
			<view class="main">
				<view class="coment-list" v-for="(item,index) in videoList" :key="index" @click="videoDetail(item.furl,item.vid)">
					<view class="img-box"><image class="img" :src="item.furl" mode="aspectFill"></image></view>
					<view>
						<view class="title-name-ince">
							<view class="title">{{item.vtitle}}</view>
							<!-- <view class="name">{{item.vnote}}</view> -->
						</view>
						<view class="item-time">{{item.vcreateTime}}</view>
						<view class="item-text">{{item.vnote}}</view>
						<view class="item-icon-list">
							<view class="iconfont">&#xe641;<text class="item-num">{{item.vpraiseCount}}</text></view>
							<view class="iconfont">&#xe623;<text class="item-num">{{item.vfavoritesCount}}</text></view>
							<view class="iconfont" style="font-size: 25rpx;">&#xe629;<text class="item-num">{{item.vplayCount}}</text></view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more style="padding: 20rpx;" v-if="videoList.length > 10 || videoList.length == 10" :status="loadingType" iconType="auto"></uni-load-more>
		</scroll-view>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
	import msTabs from '@/components/ms-tabs.vue'
	import { $POST, $GET } from '../../network/api.js'
	import { formatDate } from '@/network/date.js'
  export default {
		components: { topTab, msTabs },
    data() {
      return {
				dataLength: 0,
				loadingType: 'loading', // 加载更多状态
				navHeight:'', // 主体高度
				triggered: false, // 下拉刷新开关
				userData: uni.getStorageSync('user_key'), // 获取个人信息
				videoUpload: { // 我的上传参数
					account: '', // 登录人账号
					pageNum: 1,
					pageSize: 10,
					status: 0 // 上传状态  待审核=1，审核中=2，已完成=9，已上架=8，已下架=11，0=全部
				},
				videoList: [], // 列表数据
				active: 0,
					list:[
						{ title:'全部', value: 0 }, { title:'待审核', value: 1 },
						{ title:'审核中', value: 2 }, { title:'已上架', value: 8 },
						{ title:'已下架', value: 11 }, { title:'已完成', value: 9 }
					],
				}
		},
		onReady(){
			this.getHight() // 获取高度
		},
	onLoad() {
		this.getUploadList()
	},
  onShow() {},
  methods: {
		// 跳视频详情
		 videoDetail(url,id) {
			uni.navigateTo({
				url: '/pages/home/video_details?videoUrl='+url+'&vid='+id
			})
		 },
		// 关闭下拉刷新
		onAbort() {
			const vm = this
			setTimeout(() => {
				vm.triggered = false;
			}, 100)
		},
		// 下拉刷新
		onRefresh() {
			const vm = this
			vm.triggered = true	
			vm.getUploadList() 		
		 },
		// 滚动到底部
		scrollBottom() {
			this.videoUpload.pageNum = this.videoUpload.pageNum +1
			if(this.dataLength < 10) {
				this.loadingType='nomore'
				return
			}
			this.getUploadList() 
		},
		// 获取设备高度
		getHight() {
			const vm = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					let windowHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					let titleH = uni.createSelectorQuery().select(".sv")
					titleH.boundingClientRect(data=>{
						vm.navHeight = windowHeight - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
						console.log("高度:",vm.navHeight)
					}).exec()
				}
			})
		},
		// 我的上传列表
		getUploadList() {
			 this.videoUpload.account = this.userData.account // 账号赋值
			$POST("/boke-user/myVideoUpload/list",this.videoUpload).then(res => {
				res.data.forEach(item => {
					item.vcreateTime =  formatDate(item.vcreateTime)
				})
				this.dataLength = res.data.length // 数据长度用于分页
				this.videoList = [...this.videoList,...res.data] // 数据赋值列表
				this.onAbort() // 关闭下拉刷新
			})
		},
		// tab选项卡
		tabInput(e,item) {
			this.videoUpload.status = item.value // tab选项id赋值
			this.videoUpload.pageNum = 1
			this.getUploadList() // 调用列表方法
		},
		// 返回上一页
		backClick() {
			uni.switchTab({
			    url: '/pages/my/index'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	.tabs-box{
		height: 100rpx;
		border-bottom: 1px solid #F2F2F2;
		line-height: 100rpx;
		/deep/ .tab::-webkit-scrollbar{
		 display:none； 
		}
		/deep/ .tab{
			height: 96rpx !important;
			line-height: 96rpx !important;
		}
		/deep/ .tab__line {
			height: 6rpx !important;
		}
		/deep/ .tab__item {
			line-height: 96rpx !important;
		}
		/deep/ .tab__item-title {
			margin: 0 35rpx !important;
		}
	}
	.main{
		padding: 20rpx 27rpx 0 27rpx;
		.coment-list{
			width: 100%;
			height: 305rpx;
			background: #FFFFFF;
			box-shadow: 0px 8rpx 16rpx 0px rgba(124, 133, 236, 0.28);
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
			.img-box{
				width: 215rpx;
				height: 273rpx;
				margin: 0 37rpx 0 18rpx;
				.img{
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
			.title-name-ince{
				width: 410rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title{
					width: 70%;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #000000;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.name{
					padding:0 25rpx 0 7rpx;
					font-size: 24rpx;
					font-family: inpinheiti;
					font-weight: 400;
					color: #666666;
				}
			}
			.item-time{
				padding: 17rpx 0 22rpx 0;
				font-size: 20rpx;
				font-family: inpinheiti;
				font-weight: 400;
				color: #999999;
			}
			.item-text{
				width: 410rpx;
				// height: 110rpx;
				font-size: 24rpx;
				font-family: inpinheiti;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
			.item-icon-list{
				
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 25rpx 19rpx 0 6rpx;
				color: #666666;
				.iconfont{
					font-size: 30rpx;
					.item-num{
						font-size: 20rpx;
						font-family: inpinheiti;
						font-weight: 400;
							margin-left: 15rpx;
					}
				}
			}
		}
	}
</style>

